<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,
   				 width=device-width,initial-scale=1.0" />
		<title>物联网可视化平台</title>
		<link rel="shortcut icon" href="../../image/oss/iot/favicon2.ico" type="image/x-icon">
		
		<link rel="stylesheet" href="lib/element-ui/index.css">
		<script src="lib/element-ui/vue.min.js"></script>
		<script src="lib/element-ui/index.js"></script>
		<script src="../common/util.js"></script>
<!--		<script src="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Cesium.js"></script>-->
<!--		<link href="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Widgets/widgets.css" rel="stylesheet">-->
<!--		<script type="importmap">-->
<!--        {-->
<!--            "imports": {-->
<!--                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",-->
<!--                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"-->
<!--            }-->
<!--        }-->
<!--    </script>-->
		<script type="text/javascript" src="./lib/jquery/jquery.min.js"></script>
		
		<script type="text/javascript" src="./lib/layer/layer.js"></script>
		
<!--		<script type="text/javascript" src="?v=3.0&ak=kKdujke45DE5elsaLoqIFQDWaVLhFyFU"></script>-->
		<!-- 视频播放 -->
<!--		<script src="https://open.ys7.com/sdk/js/1.3/ezuikit.js"></script>  -->
		<script type="text/javascript" src="../../lib/echarts/echarts.min.js"></script>	 
		<script type="text/javascript" src="../../lib/echarts/echarts-liquidfill.min.js"></script>
		<script type="text/javascript" src="../../lib/mqtt/mqtt.min.js"></script>
		<script type="text/javascript" src="js/webrtcstreamer2.js"></script>
		<script type="text/javascript" src="js/adapter2.min.js"></script>
		<script type="text/javascript" src="js/show.js"></script>		
		<link rel="stylesheet" href="css/show.css" />

	</head>
	<body>
		<div id="appps">
<!--			<video id='video' controls autoplay autobuffer muted preload='auto'-->
<!--				   style='width:90%; height: 290px; margin-left:5%;object-fit: fill;'>-->
<!--			</video>-->

			<div id="app" style="height: 0;z-index: -9999">
			</div>
			
			<el-dialog title="数据下发" :visible.sync="dialogVisible" :width="popwidth" >
			  <el-input v-model="inputData" size="medium" placeholder="请输入数据"></el-input>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="downdata">确 定</el-button>
			  </span>
			</el-dialog>
				
		</div>
		<div class="operateColumn">
			<img src="./image/scale_d.png" onclick="scaled()">
			<img src="./image/scale_x.png" onclick="scalex()">
			<img src="./image/scale_n.png" onclick="scalen()">
		</div>
	</body>
    <script type="text/javascript">
    	var id = getQueryString('id') ;
		var keyCode = getQueryString('keyCode') ;
		
		var app = new Vue({
    		el:"#appps",
			data:function(){
				return {
					isdrag:false,
					dialogVisible: false ,
					downSensorId : '' ,
					inputData: '' ,
					tabmode:0,
					uploadImgs:[],
					initUpload:'',
					uploadImgCount:0,
					sensorMap:{},
					videoMap:{},
					nid:'',				//当前选择对象n类型
					sid:'',
					sensor_id:'',
					node_id:'',
					cid:'',
					video_id:'',
					bdMap:{}, 			//节点id-map对象
					chartMap:{} ,		// 	
					scaler:1 ,			// 放大缩小
					changescaler: 1 ,   // 变化
					orginWidth: '' ,    // 组件的宽度
					orginHeight:'' ,    // 组件的高度
					client: '' ,
					scene_id: '' ,		// 场景id
					lastTime: new Date().getTime() ,
					popwidth: ''   // 弹窗宽度
				};
			},
			methods:{
				initVisualInfo(){	//初始化组态数据
					if( keyCode != null){
						var that = this;
						commonAjax('GET',baseurl+'/service/visual/display?keycode='+keyCode, '',function(e){
							 if(isOK(e)){
	                            var data=e.data;
	                            document.title= e.data.name ;
	                            that.scene_id = e.data.scene_id ;
	                            
	                            $("#app").html(data.content);
								 // console.log(typeof data.content)
								 // if(data.content.includes("three.js")){
									//  import('./moduleglb2.js')
									// 		 .then((module) => {
									// 			 // 成功导入模块
									// 			 // 使用模块中的代码
								 //
									// 			 module.init(data.content);
									// 			 module.animate();
									// 			 // that.module.initCesium()
									// 		 })
									// 		 .catch((error) => {
									// 			 // 导入失败，处理错误
									// 			 console.error('Failed to import module:', error);
									// 		 });
								 // }

	                            // chart 初始化
	                            reinitChartObj();
	                            // 初始化实时数据
	                            initBaseData() ;
	                            initVideo();
	                            that.initCanvasStyle();
	                            initMap();
	                            initTextOrTime();
	                            that.mqttInit();
	                            // 初始化设备状态
	                            initDeviceStatus();
	                            
	                            if(data.dis_type == 1 ){
	                            	that.popwidth = '80%' ;
	                            }else{
	                            	that.popwidth = '30%' ;
	                            }
	                        } 
						});
					}
				},
				downdata(){
					// 数据下发
					commonAjax('PUT',baseurl+"/service/sensor/param/down.json", {id: app.downSensorId , sdata: app.inputData },function(data){
						if(isOK(data)){
							app.$message({
						          message: '成功',
						          type:'success'
						    });
							setTimeout(function() {
								// 关闭
								app.dialogVisible = false ; 
								app.inputData = '' ;
							}, 1000);
						}else{
							app.$message.error(data.statusMsg);
							setTimeout(function(){
								app.inputData = '' ;
								app.dialogVisible = false ; 
							}, 2000);
						}
					});
				},
				//初始化样式
				initCanvasStyle(){
					var xr = 1 ; 
					// 屏幕宽度
					var win_width = $(window).width() ;
					var win_height = $(window).height() ;
					
					// 组态高度
					var content_width = $(".edit-container").width();
					var content_height = $(".edit-container").height();
					
					this.orginWidth  = content_width ;
					this.orginHeight = content_height ;
					
					r = win_width / content_width ;
// 					h = win_height / content_height ;
					
					var translatewidth = 0 ;
					var translateheight = 0 ;
					
					xr = r ;
					
					this.scaler = xr ;
					this.changescaler = xr ;
					$(".edit-container").css({
				   		"-webkit-transform":"scale(" + xr + ", "+ xr +" ) translate("+translatewidth+"px,"+translateheight+"px)",
				   		"transform":"scale(" + xr + ", "+ xr +" ) translate("+translatewidth+"px,"+translateheight+"px)",
				   		"position":"relative",
				   		"transform-origin":"0 0",
				   		"margin-left":"0"
				   	});
					
					// 这里把背景色或者背景图片，更换下
					var bg = $(".edit-container").attr("bg") ;
					if(isNotEmpty(bg)){
						$("body").css("background-color",bg) ;
					}
					
					var url =  $(".edit-container").attr("bgurl") ;
					if(isNotEmpty(url)){
						$("body").css("background","url("+ url +")  no-repeat ") ;
						$("body").css("background-position","center top") ;
					}
				},
				mqttInit(){
                	var that = this ;
                	// 连接选项
                	var client = this.client ;
                	const options = {
                	      connectTimeout: 4000, // 超时时间
                	      // 认证信息
                	      clientId: 'brower_' + parseInt(Math.random()/31.1*10000000000),
                	      username: mqttUserName ,
                	      password: mqttPassword ,
                	}
                	client = mqtt.connect('ws://'+document.domain+':8083/mqtt', options) ;
                	client.on('reconnect', function(error)  {
                		console.log("reconnect");
                	})
                	client.on('error', function(error) {
                	    console.log('连接失败:', error)
                	})
                	client.on('message', function(topic, message,s) {
                		if( message.toString() == '1' ){
                			if( that.lastTime + 2*1000 < new Date().getTime() ){
                				that.lastTime = new Date().getTime() ;
                               	
                				udpChartValue();
                				initSensorData();
                				initControlNode();
                				initStateNode() ;
                				initDeviceStatus();
                			}
                		}
                	})
                	client.subscribe("/scene/update/"+ that.scene_id );
            		client.publish('/sys/update/scene' , that.scene_id+'' );
                }
			},created(){
				
			},mounted() {
				// 初始化组态信息
				this.initVisualInfo();
				$(window).resize(function() {
					app.initCanvasStyle();
				});




			}
    	})
    </script>

</html>
